
<@override name="title">部门管理</@override>

<@override name="body">
	<div class="layui-card">
		<div class="layui-card-body search">
			<div class="layui-row">
				<form class="layui-form">
					<div class="layui-col-md2 mar-rgt">
						<select name="status" lay-filter="query-status">
							<option value="" selected>请选择</option>
							<option value="0">禁用</option>
							<option value="1">正常</option>
						</select>
					</div>
					<div class="layui-col-md2 i-search-warp">
						<input type="text" autocomplete="off" id="searchTitle" name="search" placeholder="角色名称" class="layui-input">
						<i class="i-search layui-icon i-search-1" lay-submit lay-filter="role-query"></i>
					</div>
				</form>
				<div class="pull-right">
					<button class="pear-btn pear-btn-primary pear-btn-md" id="add">
						<i class="layui-icon layui-icon-add-1"></i>新增
					</button>
				</div>
			</div>
		</div>
		<table id="role-table" lay-filter="role-table"></table>
	</div>
</@override>

<@override name="script">
	<script type="text/javascript">
		layui.use(['table', 'form', 'jquery','common', 'xmSelect', 'laydate', 'dtree'], function() {
			let table = layui.table;
			let form = layui.form;
			let $ = layui.jquery;
			let common = layui.common;
			let dtree = layui.dtree;

			// 全局的查询条件
			let where = {};

			// 表格渲染
			table.render({
				elem: '#role-table',
				url: g.ctx + '/api/sys/role/list',
				page: true,
				limit: 10,
				cols: [[
					{
						type: 'checkbox'
					},
					{
						title: '权限名称', field: 'name', align: 'center'
					},
					{
						title: '权限状态', field: 'status', align: 'center',
						templet: function (d) {
							switch (Number(d.status)) {
								case 0:
									return '废弃';
								case 1:
									return '正常';
								default:
									return '';
							}
						}
					},
					{
						title: '备注信息', field: 'desc', align: 'center'
					},
					{
						title: '更新时间', field: 'updateTime', align: 'center'
					},
					{
						title: '操作', toolbar: LAYUI_TEMPLET.getTableHandleHtml(['edit', 'discard', 'permission']), align: 'center', width: 260
					}
				]],
				skin: 'line',
				autoSort: false, // 启动服务器端排序
				toolbar: "",
				defaultToolbar: []
			});

			// 行内元素事件
			table.on('tool(role-table)', function(obj) {
				if (obj.event === 'discard') {
					window.discard(obj);
				} else if (obj.event === 'edit') {
					window.edit(obj);
				} else if (obj.event === 'permission') {
					window.permission(obj);
				}
			});

			// 默认查询
			form.on('submit(role-query)', function(obj) {
				$.extend(where, obj.field);

				table.reload('role-table', {
					where: where,
					page: {
						curr: 1
					}
				}, true);
				return false;
			});

			// 用户状态查询
			form.on('select(query-status)', function(obj) {
				$('*[lay-filter="role-query"]').trigger('click');
			});

			// 默认排序
			table.on('sort(role-table)', function(obj) {
				$.extend(where, {field: obj.field, order: obj.type});

				//尽管我们的 table 自带排序功能，但并没有请求服务端。
				//有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
				table.reload('role-table', {
					initSort: obj, //记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数
					// where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
					// 	field: obj.field, //排序字段   在接口作为参数字段  field order
					// 	order: obj.type //排序方式   在接口作为参数字段  field order
					// },
					where: where,
					page: {
						curr: 1
					}
				}, true);
			});

			// 增加部门
			$("#add").on("click", function () {
				openDialog();
			});

			// 修改部门
			window.edit = function(obj) {
				// 当前选择行数据
				let row = obj.data;
				ajax({
					url: g.ctx + '/api/sys/role/get/' + row.id,
					type: 'get',
					success: function (resp) {
						openDialog(resp.data);
					}
				})
			};

			window.openDialog = function(data){
				let title = "编辑";
				if(data === undefined){
					title = "新增";
					data = {};
				}

				layer.open({
					type: 1,
					title: title,
					shade: 0.1,
					maxmin: true,
					area: [common.isModile()?'100%':'85%', common.isModile()?'100%':'70%'],
					btn: ['确定','取消'],
					content:  LAYUI_TEMPLET.formHtmlGen([
						{type: 'hidden', name: 'id', value: data.id},
						{type: 'text', label: '角色名称', name: 'name', value: data.name, verify: "required", colspan: 12},
						{type: 'textarea',label: '角色描述', name: 'desc', text: data.desc, verify: "", colspan: 12}
					]),
					success: function(laDom){
						// 渲染表单控件
						UTILS.formRender(laDom);
					},
					yes: function (index, laDom) {
						// 提交表单验证
						UTILS.formSubmit("#layuiForm");
					}
				});
			};

			// 提交表单
			form.on('submit(layui-form)', function(data){
				// 判断是更新还是新增
				let url = "";
				if (data.field.id){
					url = g.ctx + '/api/sys/role/update';
				} else{
					url = g.ctx + '/api/sys/role/add';
				}

				// 属性值封装
				let params = UTILS.processFormParams("#layuiForm");
				layer.load();
				ajax({
					url: url,
					type: 'post',
					data: params,
					success: function (resp) {
						layer.closeAll();
						layer.msg(resp.msg, {icon: 1});
						table.reload('role-table');
					}
				});
				return false;
			});

			// 废弃角色
			window.discard = function(obj) {
				// 当前选择行数据
				let row = obj.data;

				layer.confirm('确定要废弃该角色吗？', {
					icon: 3,
					title: '提示'
				}, function(index) {
					layer.close(index);
					let loading = layer.load();
					ajax({
						url: g.ctx + '/api/sys/role/discard',
						type: 'post',
						data: {id: row.id},
						success: function(resp) {
							layer.close(loading);
							layer.msg(resp.msg, {icon: 1});
							table.reload('role-table');
						}
					})
				});
			};

			// 权限分配
			window.permission = function (obj) {
				let row = obj.data;
				ajax({
					url: g.ctx + '/api/sys/role/get/permission',
					type: 'get',
					data: {roleId: row.id},
					success: function (resp) {
						permissionDialog(row, resp.data);
					}
				});
			};

			window.permissionDialog = function (row, selectedNodes) {
				layer.open({
					type: 1,
					title: "权限选择",
					shade: 0.1,
					maxmin: true,
					area: [common.isModile()?'100%':'285px', common.isModile()?'100%':'520px'],
					btn: ['确定','取消'],
					content: '<ul id="menu" class="dtree" data-id="0"></ul>',
					success: function(laDom){
						// 渲染控件
						dtree.render({
							elem: "#menu",
							method: 'get',
							dataStyle: "layuiStyle", 				 	//使用layui风格的数据格式
							response: {message:"msg",statusCode:0}, 	//修改response中返回数据的定义
							checkbar: true, //开启复选框
							url: g.ctx + "/api/sys/menu/dtree",
							done: function(data, obj, first) {  		//使用异步加载回调
								dtree.chooseDataInit("menu", selectedNodes);
							}
						});
					},
					yes: function (index, laDom) {
						// 获取复选框数组数据
						let paramJsonArr = dtree.getCheckbarNodesParam("menu");
						let selectNodeList = [];
						paramJsonArr.map(function (item) {
							selectNodeList.push(item.nodeId);
						});

						layer.load();
						ajax({
							url: g.ctx + "/api/sys/role/grant/permission",
							type: 'post',
							data: {roleId: row.id, menuIds: selectNodeList.join(',')},
							success: function (resp) {
								layer.closeAll();
								layer.msg(resp.msg, {icon: 1});
								table.reload('role-table');
								return true;
							}
						})
					}
				});
			}

		})
	</script>
</@override>

<@extends name="/base/_base_list.ftl" />
